<!-- 功能栏 -->
<template>
  <view class="controlStrip">
    <scroll-view class="scroll-view" scroll-x="true" show-scrollbar scroll-left="bottom">
      <view class="scroll-view-item" v-for="item in homepageBall" :key="item.id">
        <view class="scroll-view-item-context">
          <image class="scroll-item-icon" :src="item.iconUrl"></image>
          <text class="scroll-item-text">{{ item.name }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue'
  import {
    onLoad
  } from '@dcloudio/uni-app'
  import {
    getHomepageBallAPI
  } from '@/common/api/discoverAPI.js'

  // 获取首页发现图标入口数据
  const homepageBall = ref([])
  const getHomepageBall = async () => {
    const res = await getHomepageBallAPI()
    if (res.code !== 200) return uni.showToast({
      title: '获取首页发现图标入口列表失败！',
      duration: 20000,
      icon: 'error'
    })
    homepageBall.value = res.data
  }

  onLoad(() => {
    getHomepageBall()
  })
</script>

<style lang="scss" scoped>
  .controlStrip {
    height: 150rpx;
    width: 100%;
  }
  .scroll-view {
    white-space: nowrap;
    width: 100%;
    .scroll-view-item {
      display: inline-block;
      height: 150rpx;
      width: 150rpx;

      .scroll-view-item-context {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        .scroll-item-icon {
          height: 50rpx;
          width: 50rpx;
          background-color: #ea0000;
          border-radius: 10px;
        }

        .scroll-item-text {
          font-size: 25rpx;
          color: #aaa597;
        }
      }

    }
  }
</style>